<template>
  <div id="OlMap"></div>
</template>
<script>
import mapJSON from "@/assets/js/hubei";
import OlMap from "@/assets/map";
import { mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      wmsLayer: null,
      mapType: [
        {
          iamge: null,
          name: "影像",
        },
        {
          vec: null,
          name: "基础地图",
        },
        {
          ter: null,
          name: "地形图",
        },
      ],
      showMap: false,
      res: 0,
    };
  },
  computed: {
    ...mapGetters("qj", ["layer", "city", "county"]),
  },
  watch: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ...mapMutations("qj", {
      storeMap: "SETMAP",
      setBoundaryLayer: "SETBOUNDARYLAYER",
      clearLayer: "CLEARLAYER",
    }),

    //地图显示方法
    initMap() {
      this.JSONData = mapJSON.hubeiallMapJson();

      this.map = new OlMap("OlMap", [Number(110.182704), Number(22.65743)], 8);
      this.storeMap(this.map);
      //   this.mapType[0].iamge = this.map.layer.addTianDiTuImgLayer(); //矢量图(基础地图)
      this.mapType[1].vec = this.map.layer.addTianDiTuVecLayer(); //矢量图(基础地图)
      //   this.mapType[2].ter = this.map.layer.addTianDiTuTerLayer(); //地形图

      this.boundaryLayer = this.map.layer.createMaskLayer("boundaryLayer");

      this.setBoundaryLayer(this.boundaryLayer);
      this.addBoundry();
    },

    addBoundry() {
      this.map.panTo([110.182704, 22.65743], 8);
      this.boundaryLayer.getSource().clear();
      let features = this.map.format.converGeoJsonToFeature(this.JSONData); //json转feature
      let geom = features[0].getGeometry(); //获取geometry对象
      this.map.polygon.addPolygonHoles(this.boundaryLayer, geom, {
        strokeColor: "white",
        strokeWidth: 2,
        fillColor: "rgba(0,0,0,0.6)",
      });
    },
  },
};
</script>

<style scoped lang="less">
#OlMap {
  width: 100%;
  height: 100%;
  // width: calc(100% - 400px);
  // height: calc(100% - 120px);
  width: 2000px;
  height: 762px;
  pointer-events: all;
}
</style>
